<template>
  <div>
    <pform ref="form" :model="form" lw="150">
      <el-form-item label="区域">
        <el-select class="w233" size="small" v-model="form.field1" placeholder="请选择区域">
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>

      <el-form-item label="可用区">
        <el-radio-group v-model="form.field2">
              <el-radio-button label="可用区1"></el-radio-button>
              <el-radio-button label="可用区2"></el-radio-button>
            </el-radio-group>
      </el-form-item>
      <el-form-item label="挂载到云服务器">
        <el-radio-group v-model="form.field13" v-show="form.field2=='可用区2'">
            <el-radio :label="1">暂不挂载</el-radio>
          </el-radio-group>
          <div v-show="form.field2=='可用区1'">
            <div>
              <el-radio-group v-model="form.field4">
                <el-radio :label="1">立即挂载</el-radio>
                <el-radio :label="2">暂不挂载</el-radio>
              </el-radio-group>
            </div>
            <div class="mbt15">
              <el-select class="w233 mr80" size="small" v-model="form.field5" placeholder="请选择虚拟机或裸金属服务器">
                <el-option
                  v-for="item in option4"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-input class="w233" suffix-icon="el-icon-search" v-model="form.field6" size="small" placeholder="请输入规格名称"></el-input>
            </div>
            <plist size="mini" ref="pList" :tableData="tableData" :tableColumn="tableColumn" :hasIndex="false" :hasRadioSelect="true">
            </plist>
          </div>
        </el-form-item>
      <fbr></fbr>

      <el-form-item label="数据源（可选）">
        <el-radio-group v-model="form.field7">
          <el-radio-button label="从备份创建"></el-radio-button>
          <el-radio-button label="从快照创建"></el-radio-button>
          <el-radio-button label="从镜像创建"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="">
        <div v-show="form.field7==='从备份创建'">
          <div>仅支持从可用状态的备份创建磁盘，可以使用增强备份进行批量创建磁盘</div>
          <div class="mbt15">
            <el-select class="w233 mr80" size="small" v-model="form.field8" placeholder="请选择虚拟机或裸金属服务器">
              <el-option
                v-for="item in option4"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input class="w233" suffix-icon="el-icon-search" v-model="form.field9" size="small" placeholder="请输入名称"></el-input>
          </div>
          <plist size="mini" ref="pList" :tableData="tableData" :tableColumn="tableColumn1" :hasIndex="false" :hasRadioSelect="true">
          </plist>
        </div>
        <div v-show="form.field7==='从快照创建'">
          <div>快照不支持跨可用区创建磁盘</div>
          <div class="mbt15">
            <el-input class="w233" suffix-icon="el-icon-search" v-model="form.field10" size="small" placeholder="请输入名称"></el-input>
          </div>
          <plist ref="pList" :tableData="tableData" :tableColumn="tableColumn2" :hasIndex="false" :hasRadioSelect="true">
          </plist>
        </div>
        <div v-show="form.field7==='从镜像创建'">
          <div>只支持数据盘镜像创建磁盘</div>
          <div class="mbt15">
            <el-select class="w233 mr80" size="small" v-model="form.field11" placeholder="请选择私有镜像或共享镜像">
              <el-option
                v-for="item in option4"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input class="w233" suffix-icon="el-icon-search" v-model="form.field12" size="small" placeholder="请输入名称"></el-input>
          </div>
          <plist ref="pList" :tableData="tableData" :tableColumn="tableColumn3" :hasIndex="false" :hasRadioSelect="true">
          </plist>
        </div>
      </el-form-item>


      <el-form-item label="磁盘规格">
        <el-select class="w233" size="small mr60" v-model="form.field13" placeholder="请选择磁盘类型">
            <el-option
              v-for="item in option2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input-number class="w215 mr3" size="small" v-model="form.field14"  :min="1"></el-input-number>GB
      </el-form-item>
      <el-form-item label="是否共享">
        <el-radio-group v-model="form.field15">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="支持接口方式">
        <el-checkbox-group v-model="form.field16">
          <el-checkbox label="SCSI"></el-checkbox>
          <el-checkbox label="iSCSI"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="传输安全">
        <el-radio-group v-model="form.field17">hysical/physicalMachineAdd
            <el-radio :label="1">加密</el-radio>
            <el-radio :label="2">不加密</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="标签">
        <div style="min-height: 80px;">
          <div class="flex-c">
            <pbtn @click="hasTag=true" class="mr10"></pbtn>
            <div>添加标签</div>
          </div>
          <div >
            <div class="flex-c" v-show="hasTag">
              <pbtn @click="hasTag=false" iname="minus" class="mr10"></pbtn>
              <el-input size="small" style="width:233px;margin-right: 40px;" v-model="form.field18" placeholder="请输入标签键"></el-input>
              <el-input size="small" style="width:233px;" v-model="form.field19" placeholder="请输入标签值"></el-input>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="磁盘名称">
        <div class="flex-c">
          <el-input class="w233" v-model="form.field20" size="small" placeholder="请输入"></el-input>
        <div class="explain">申请多台时，系统自动增加后缀，例如：bms-0001</div>
        </div>
      </el-form-item>
      <el-form-item label="申请数量">
        <div class="flex-c">
          <el-input-number class="w215" size="small" v-model="form.field21"  :min="1" :max="200"></el-input-number>
        <div class="explain">一次最多支持申请200台</div>
        </div>
      </el-form-item>
    </pform>
  </div>
</template>

<script>
export default{
    data() {
      return {
        hasTag:false,
        tableData:[{
          aaa:'physical.o3',
          bbb:'physical.o3',
          ccc:'physical.o3',
          ddd:'physical.o3',
          eee:'physical.o3',
          fff:'physical.o3',
          ggg:'physical.o3',
        }],
      tableColumn: [
        {
          field: "aaa",
          label: "名称",
          width: "150"
        },
        {
          field: "bbb",
          label: "选择挂载点",
          width: "150"
        },
        {
          field: "ccc",
          label: "状态",
          width: "150"
        },
        {
          field: "ddd",
          label: "镜像",
          width: "150"
        },
        {
          field: "eee",
          label: "私有IP地址",
          width: "150"
        },
        {
          field: "fff",
          label: "弹性公网IP",
          width: "150"
        },
        {
          field: "ggg",
          label: "可用区",
          width: "150"
        },
      ],
      tableColumn1: [
        {
          field: "aaa",
          label: "名称",
          width: "150"
        },
        {
          field: "bbb",
          label: "状态",
          width: "150"
        },
        {
          field: "ccc",
          label: "磁盘名称",
          width: "150"
        },
        {
          field: "ddd",
          label: "容量（GiB）",
          width: "150"
        },
        {
          field: "eee",
          label: "可用区",
          width: "150"
        },
        {
          field: "fff",
          label: "创建时间",
          width: "150"
        },
      ],
      tableColumn2: [
        {
          field: "aaa",
          label: "名称",
          width: "150"
        },
        {
          field: "bbb",
          label: "状态",
          width: "150"
        },
        {
          field: "ccc",
          label: "磁盘名称",
          width: "150"
        },
        {
          field: "ddd",
          label: "磁盘类型",
          width: "150"
        },
        {
          field: "eee",
          label: "容量（GiB）",
          width: "150"
        },
        {
          field: "fff",
          label: "可用区",
          width: "150"
        },
        {
          field: "ggg",
          label: "创建时间",
          width: "150"
        },
      ],
      tableColumn3: [
        {
          field: "aaa",
          label: "名称",
          width: "150"
        },
        {
          field: "bbb",
          label: "状态",
          width: "150"
        },
        {
          field: "ccc",
          label: "操作系统类型",
          width: "150"
        },
        {
          field: "ddd",
          label: "容量（GiB）",
          width: "150"
        },
        {
          field: "fff",
          label: "创建时间",
          width: "150"
        },
      ],
        form: {
          field1:'',
          field2:"可用区1",
          field3:'',
          field4:2,
          field5:'',
          field6:'',
          field7:'从备份创建',
          field8:'',
          field9:'',
          field10:'',
          field11:'',
          field12:'',
          field13:'',
          field14:'',
          field15:'',
          field16:[],
          field17:'',
          field18:'',
          field19:'',
          field20:'',
          field21:'',
          field22:'',
          field23:'',
        },
        option:[
          {label:'东南中心',value:'1111'},
          {label:'南方中心',value:'2222'},
          {label:'北方中心',value:'3333'},
        ],
        option1:[
          {label:'NFSv3',value:'NFSv3'},
          {label:'NFSv4',value:'NFSv4'},
          {label:'CIFS',value:'CIFS'},
          {label:'HDFS',value:'HDFS'},
          {label:'S3',value:'S3'},
          {label:'Swift',value:'Swift'},
        ],
        option2:[
        {label:'普通IO',value:'普通IO'},
        {label:'高IO',value:'高IO'},
        {label:'通用性SSD',value:'通用性SSD'},
        {label:'超高IO',value:'超高IO'},
        {label:'通用型SSD V2',value:'通用型SSD V2'},
        {label:'极速型SSD',value:'极速型SSD'},
        {label:'极速型SSD V2',value:'极速型SSD V2'},
        ],
        option4:[
          {label:'ECS1',value:'ECS1'},
          {label:'ECS2',value:'ECS2'},
          {label:'ECS3',value:'ECS3'},
        ],

      }
    },
    methods: {
      init() {},
      getFormData() {
        return JSON.parse(JSON.stringify(this.form))
      },
    }

  }
</script>

<style scoped lang="less">
.radio-item{
  display: flex;
  align-items: center;
  margin: 20px 0;
  .name{
    font-weight: 400;
    font-size: 14px;
    color: #000000a5;
  }
  .pz{
    font-weight: 400;
    font-size: 14px;
    color: #0000006d;
  }
}
</style>
